<template>
  <div class="mymusic banxin">
    <div class="notlogin xbx">
      <div class="pic">
        <a href="javascript:;" @click="goLogin">立即登录</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    //点击登录按钮
    goLogin() {
      //触发mutations打开login
      this.$store.commit("changeLoginShow", true);
    },
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.mymusic {
  height: 700px;
  background-color: #fff;
  border: 1px solid #ccc;
}
.notlogin {
  .pic {
    width: 807px;
    height: 278px;
    background: url("../assets/images/mymusic.png") no-repeat;
    margin-top: 104px;
    margin-left: 104px;
    position: relative;
  }
  .pic a:hover {
    background-position: 0 -277px !important;
  }
  .pic a {
    position: absolute;
    right: 158px;
    text-indent: -9999px;
    bottom: 32px;
    background: url("../assets/images/mymusic.png") 325px 122px;
    display: block;
    width: 167px;
    height: 45px;
  }
}
</style>